<template>
  <el-card header="扩展信息" class="form-section">
    <el-form-item label="客户标签">
      <el-select
        v-model="formData.customer_tags"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择或输入标签"
        style="width: 100%"
        @change="handleTagsChange"
      >
        <el-option v-for="item in tagOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <div class="tag-hint">
        <el-text size="small" type="info">支持自定义标签，输入后按回车创建</el-text>
      </div>
    </el-form-item>

    <el-form-item label="下一步跟进计划">
      <el-input
        v-model="formData.next_followup_plan"
        type="textarea"
        :rows="3"
        placeholder="请输入下一步跟进计划（时间、方式、目标等）"
        maxlength="500"
        show-word-limit
      />
    </el-form-item>

    <el-form-item label="客户备注">
      <el-input
        v-model="formData.remark"
        type="textarea"
        :rows="4"
        placeholder="请输入客户备注（特殊需求、注意事项等）"
        maxlength="1000"
        show-word-limit
      />
    </el-form-item>

    <el-form-item v-if="formData.status === 5" label="流失原因" prop="lost_reason">
      <el-input
        v-model="formData.lost_reason"
        type="textarea"
        :rows="3"
        placeholder="请输入客户流失原因"
        maxlength="255"
        show-word-limit
      />
    </el-form-item>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
  })

  const emit = defineEmits(['change'])

  // 直接使用props.modelValue，避免尝试重新赋值整个对象
  const formData = computed(() => props.modelValue)

  const tagOptions = ref(['高价值', '决策快', '价格敏感', '行业优质', '续费意向', '转介绍'])

  const handleTagsChange = (tags: string[]) => {
    emit('change', { field: 'customer_tags', value: tags })
  }
</script>

<style scoped>
  .tag-hint {
    margin-top: 8px;
  }
</style>
